<template>
  <div>
    <button @click="ad">点击跳出</button>

    <div v-show="state" class="alert">
      <div class="alert-top">{{ titl }}</div>
      <div class="alert-bottom">{{ conte }}</div>
      <button @click="delalert" class="alert-button">关闭弹窗</button>
      <slot>
        <h4>占位:这边是加入插槽的位置</h4>
      </slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "ad",
  props: {
    title: {
      type: String,
      default: "输入标题",
    },
    content: {
      type: String,
      default: "输入内容",
    },
  },
  data() {
    return {
      state: false,
      titl: "",
      conte: "",
    };
  },
  methods: {
    ad() {
      if (this.state) {
        this.state = false;
      } else {
        this.state = true;
      }
      this.titl = this.title;
      this.conte = this.content;
    },
    delalert() {
      this.state = false;
    },
  },
};
</script>

<style>
html,
body {
  width: 100%;
  height: 100%;
}

.alert {
  width: 300px;
  height: 300px;
  background-image: linear-gradient(to right, #43e97b 0%, #38f9d7 100%);
  border: 1px solid green;
  border-radius: 20px;
  position: absolute;
  left: calc(50% - 150px);
  top: calc(50% - 150px);
  text-align: center;
  transition: 2s linear;
}
.alert-top {
  width: 300px;
  height: 100px;
  font-size: 30px;
  text-align: center;
  line-height: 100px;
  font-weight: 900;
}
.alert-bottom {
  width: 300px;
  height: 100px;
  font-size: 30px;
  text-align: center;
  line-height: 100px;
}
.alert button {
  background-color: rgb(219, 118, 204);
  text-align: center;
  width: 80px;
  height: 30px;
}
</style>
